<v-app>
  <div v-show="!listd" v-resize="resize" style="user-select: none; touch-action: none;">
    <setting v-show="!listd" ref="setting"> </setting>
    <viewport ref="viewport"></viewport>
    <v-btn
      fixed
      left
      top
      text
      color="primary"
      style="user-select: none; margin: 0%; padding: 0%;"
      :style="{height:size+'px', 'margin-left': width / 2 - Math.min(size*4, width/2 - size/4) + 'px'}"
      @click="tap('list')"
    >
      <div :style="{'font-size':(size * 0.5)+'px'}" style="text-transform: none;">{{name}}</div>
    </v-btn>
    <v-container
      fluid
      grid-list-md
      text-xs-center
      :style="{width:Math.min(size * 8, width) + 'px', height:size * 3.5 + 'px'}"
      style="padding: 0%; touch-action: none;"
    >
      <v-layout row wrap>
        <v-flex xs12>
          <v-text-field
            style="text-transform: none;"
            :height="size * 0.8"
            :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px', 'margin-top':size/8 + 'px', 'font-size':size*0.4+'px'}"
            dense
            hide-details
            outlined
            single-line
            v-model="action"
          >
            <v-btn
              slot="label"
              text
              style="margin: 0%; padding: 0%; min-width: 0%; min-height: 0%;"
              :style="{width:size * 0.4+'px',height:size * 0.8+'px'}"
            >
              <v-icon :size="size * 0.4" style="vertical-align: middle;">theaters</v-icon>
            </v-btn>
            <v-btn
              slot="append"
              text
              v-show="origin&&origin.length>0&&action!=origin"
              style="margin: 0%; padding: 0%; min-width: 0%; min-height: 0%;"
              :style="{width:size * 0.4+'px',height:size * 0.8+'px'}"
              @click="action=origin"
            >
              <v-icon :size="size * 0.4">settings_backup_restore</v-icon>
            </v-btn>
          </v-text-field>
        </v-flex>
      </v-layout>
      <playbar ref="playbar"></playbar>
    </v-container>
  </div>
  <div
    v-show="listd"
    style="margin: 0; display: flex; flex-flow: column; height: 100%; user-select: none; touch-action: none;"
    :style="{height: height + 'px'}"
  >
    <div style="margin: auto; width: 100%;">
      <v-tabs v-model="tab" grow color="cyan" :height="size * 0.8">
        <v-tab v-for="(group,i) in data.algs" :key="i" :href="`#tab-${i}`">
          <p :style="{'font-size':size * 0.3+'px'}" style="text-align: center; margin: 0%; padding: 0%;">
            {{ group.name}}
          </p>
        </v-tab>
      </v-tabs>
    </div>
    <div
      style="flex: 1; overflow: auto; margin: auto; user-select: none;"
      :style="{height: (height - size * 0.8) + 'px'}"
    >
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="(group,i) in data.algs" :key="i" :value="'tab-' + i" style="height: 100%;">
          <v-layout row wrap style="margin: 0%; padding: 0%; min-width: 0%; min-height: 0%; align-items: stretch;">
            <v-card
              outlined
              style="margin: 0%; padding: 0%;"
              :style="{'width':grid + 'px'}"
              v-for="(alg, j) in group.items"
              :key="j"
            >
              <v-btn
                v-if="group.mutable"
                block
                depressed
                color="error"
                :style="{'font-size':size/3+'px', 'height': size * 0.5 + 'px'}"
                style="text-transform: none; text-align: center; margin: 0%; padding: 0%;"
                @click="removei = j;removed = true;"
                >删除
              </v-btn>
              <v-btn
                block
                depressed
                text
                color="primary"
                :style="{'font-size':size/3+'px', 'height': size * 0.5 + 'px'}"
                style="text-transform: none; text-align: center; margin: 0%; padding: 0%;"
                @click="select(i, j)"
              >
                {{alg.name}}
              </v-btn>
              <img
                v-if="pics[i] && pics[i][j]"
                :src="pics[i][j]"
                style="margin: 0%; padding: 0%;"
                :style="{'width':grid + 'px'}"
                @click="select(i, j)"
              />
              <v-progress-circular
                v-if="!(pics[i] && pics[i][j])"
                :size="grid"
                :width="~~(grid * 0.15)"
                indeterminate
              ></v-progress-circular>
              <p
                :style="{'font-size':size/4+'px'}"
                style="text-align: center; word-wrap: break-word; margin: 0%; padding: 1%;"
              >
                {{alg.exp.substring(0, 60)}}
              </p>
            </v-card>
            <v-card outlined style="margin: 0%; padding: 0%;" :style="{'width':grid + 'px'}" v-if="group.mutable">
              <v-btn
                block
                depressed
                color="primary"
                :style="{'font-size':size/3+'px'}"
                style="text-transform: none; text-align: center; margin: 0%; padding: 0%;"
                @click="addd=true"
                :height="grid"
              >
                <v-icon :size="grid * 0.5" style="vertical-align: middle;">add</v-icon>
              </v-btn>
            </v-card>
          </v-layout>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </div>
</v-app>
